<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span class="s1">我是span</span>
		<div class="box1"></div>
	</body>
</html>
<style type="text/css">
	.s1{
		background-color: yellow;
		/* 行内元素不支持设置宽度和高度 */
		/* width: 100px;
		height: 100px; */
		/* 行内元素可以设置padding border margin,但是垂直方向的padding不会影响布局 */
		/* padding: 100px; */
		/* margin: 100px; */
		border: 10px solid #0000FF;
		/* display用来设置元素的类型：inline行内元素 block块元素 inline-block行内块元素，即可以设置宽高，又不会独占一行 none元素不在页面中显示 */
		/* display: block; */
		/* visibility用来设置元素的显示状态 visible元素在页面中正常显示 hidden元素在页面中隐藏，但是依然占据页面位置 */
		/* visibility: hidden; */
		
	}
	.box1{
		width: 200px;
		height: 200px;
		background-color: #FF0000;
	}
</style>

